import React from 'react';
import { Card, Row, Col, Progress, Icon } from 'antd';
import cn from 'classnames';
import ReactEcharts from '@/components/Echarts';

// import MoreBar from './common/MoreBar';
import styles from '../index.less';

import { fixNumber } from '../util';

const getTotal = (data = {}) => {
    const { companyEmployeeNumMap = [] } = data;
    const total = { leave: 0, join: 0 };
    companyEmployeeNumMap.forEach(item => {
        total.leave += item.quitEmployeeNum;
        total.join += item.entryEmployeeNum;
    });
    return total;
};

const renderPie = (data = {}) => {
    const { companyEmployeeNumMap = [] } = data;
    const values = companyEmployeeNumMap.map((item, index) => ({
        value: item.value,
        name: item.name,
        itemStyle: {
            color: '#ffa22d',
            opacity: (index + 1) / companyEmployeeNumMap.length
        }
    }));
    return (
        <ReactEcharts
            style={{
                width: '100%',
                height: '100%'
            }}
            option={{
                // graphic: [
                //     {
                //         type: 'text',
                //         z: 100,
                //         left: 'center',
                //         top: 'middle',
                //         style: {
                //             fill: 'rgba(51,51,51,0.85)',
                //             text: `\n${total}`,
                //             font: '20px'
                //         }
                //     }
                // ],
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)',
                    position: ['50%', '50%']
                },
                series: [
                    {
                        name: '人员分布',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        label: {
                            show: true,
                            position: 'right',
                            // formatter: ['{a|{c}}{b|人}', '{b|总人数}'].join('\n'),
                            formatter: '{a|{c}}{b|人}',
                            rich: {
                                a: {
                                    color: 'rgba(51,51,51,0.85)',
                                    fontWeight: 600,
                                    fontSize: 16
                                },
                                b: {
                                    color: 'rgba(0,0,0,0.35)',
                                    fontSize: 12
                                }
                            }
                        },
                        data: values
                    }
                ]
            }}
        />
    );
};

const renderLine = (data = {}) => {
    const { trendOfOneMonthMap = {} } = data;
    const companies = Object.keys(trendOfOneMonthMap);
    if (!companies.length) return null;

    const oneCompany = trendOfOneMonthMap[companies[0]];
    const xData = oneCompany.map(item => item.attDate);
    const values = companies.map(item => {
        const company = trendOfOneMonthMap[item];
        return {
            name: item,
            type: 'line',
            data: company.map(it => ({
                value: it.attRate,
                itemStyle: {
                    color: it.attRate < it.attTargetRate ? 'red' : 'black'
                }
            }))
        };
    });
    return (
        <ReactEcharts
            style={{
                width: '100%',
                height: '100%'
            }}
            option={{
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: companies
                },
                xAxis: [
                    {
                        type: 'category',
                        name: '',
                        splitLine: { show: false },
                        data: xData
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',

                        axisLabel: {
                            interval: 10,
                            formatter: '{value}%'
                        }
                    }
                ],
                calculable: true,
                series: values
            }}
        />
    );
};

const renderRate = (rate, prefix) => {
    if (rate > 0) {
        return (
            <p className={styles.colorGood}>
                {prefix}：{rate}%
                <Icon type="caret-up" />
            </p>
        );
    }
    if (rate < 0) {
        return (
            <p className={styles.colorMedium}>
                {prefix}：{rate}%
                <Icon type="caret-down" />
            </p>
        );
    }
    return (
        <p>
            {prefix}：{rate}%
        </p>
    );
};

const OperationCard = ({ HRData = {}, ADMData = {} }) => {
    const pieTotal = getTotal(HRData);
    const { companyEmployeeNumMap = [] } = HRData;
    const employeeTotal = companyEmployeeNumMap.reduce((total, item) => total + item.value, 0);
    return (
        <Card title="企业运营支持" bordered={false}>
            <Row gutter={48}>
                <Col span={12}>
                    <Card
                        title="HR管理透视"
                        className={cn(styles.cardNoBorder, styles.cardNoPadding)}
                        bordered={false}
                        // extra={
                        //     <MoreBar
                        //         menuData={[
                        //             { title: '员工结构' },
                        //             { title: '人员流动' },
                        //             { title: '招聘进展' },
                        //             { title: '员工画像' },
                        //             { title: '薪资绩效' }
                        //         ]}
                        //     />
                        // }
                    >
                        <div className={cn(styles.subTitle, styles.subTitleExtra)}>人员分布</div>
                        <Row>
                            <Col span={12} style={{ height: 200 }} className={styles.pieTextContainer}>
                                <div className={styles.pieText}>
                                    总人数<em>{employeeTotal}</em>
                                </div>
                                {renderPie(HRData)}
                            </Col>
                            <Col
                                span={12}
                                className={styles.verticalFlex}
                                style={{
                                    height: 200
                                }}
                            >
                                <div className={styles.infoBox}>
                                    <p>本期入职</p>
                                    <p>
                                        <em>{pieTotal.join}</em>人
                                    </p>
                                </div>
                                <div className={styles.infoBox} style={{ marginTop: 24 }}>
                                    <p>离职人数</p>
                                    <p>
                                        <em>{pieTotal.leave}</em>人
                                    </p>
                                </div>
                            </Col>
                        </Row>
                        <div className={cn(styles.subTitle, styles.subTitleExtra)}>招聘进度</div>
                        <Row gutter={16}>
                            <Col span={8}>
                                <div className={styles.infoCard} style={{ border: 'none' }}>
                                    <div className={styles.infoBox}>
                                        <p>
                                            <em>{HRData.quarterTargetNum}</em>人
                                        </p>
                                        <p>季度目标</p>
                                    </div>
                                    <div className={styles.infoBox} style={{ marginTop: 32 }}>
                                        <p>
                                            <em>{HRData.excessPersonnelNum}</em>人
                                        </p>
                                        <p>超编人员</p>
                                    </div>
                                </div>
                            </Col>
                            {companyEmployeeNumMap.map(
                                (item, index) =>
                                    index <= 1 && (
                                        <Col span={8}>
                                            <div className={styles.infoCard}>
                                                <div className={styles.subTitle}>{item.name}</div>
                                                <div className={styles.infoBox}>
                                                    <p>
                                                        <em>{item.planRecruiterNum}</em>人
                                                    </p>
                                                    <p>计划招聘</p>
                                                </div>
                                                <div className={styles.progressBox}>
                                                    <div style={{ height: 30, marginTop: 30, overflow: 'hidden' }}>
                                                        <Progress
                                                            strokeColor="#FFA22D"
                                                            style={{ height: 20 }}
                                                            percent={
                                                                (item.completedRecruiterNum / item.planRecruiterNum) *
                                                                100
                                                            }
                                                            format={() => {}}
                                                        />
                                                    </div>
                                                    <p>
                                                        已完成
                                                        {fixNumber(
                                                            (item.completedRecruiterNum / item.planRecruiterNum) * 100,
                                                            2
                                                        )}
                                                        %
                                                    </p>
                                                </div>
                                            </div>
                                        </Col>
                                    )
                            )}
                        </Row>
                    </Card>
                </Col>
                <Col span={12} style={{ borderLeft: '1px solid rgb(238, 238, 238)' }}>
                    <Card
                        title="行政管理透视"
                        className={cn(styles.cardNoBorder, styles.cardNoPadding)}
                        bordered={false}
                        // extra={
                        //     <MoreBar menuData={[{ title: '考勤视图' }, { title: '资产视图' }, { title: '规章制度' }]} />
                        // }
                    >
                        <div className={cn(styles.subTitle, styles.subTitleExtra)}>总出勤率</div>
                        <Row type="flex">
                            <div className={styles.infoBox}>
                                <p>
                                    <em className={styles.colorPoor}>{ADMData.attendanceRate}%</em>
                                </p>
                                <p style={{ marginTop: 16 }}>出勤率</p>
                            </div>
                            <div className={styles.infoBox} style={{ marginLeft: 32 }}>
                                <p>
                                    <em>{ADMData.targetAttendance}%</em>
                                </p>
                                <p style={{ marginTop: 16 }}>目标值</p>
                            </div>
                            <div className={cn(styles.infoBox, styles.verticalFlex)} style={{ marginLeft: 32 }}>
                                <div>{renderRate(ADMData.yearOnYearRate, '同比')}</div>
                                <div style={{ marginTop: 8 }}>{renderRate(ADMData.chainRate, '环比')}</div>
                            </div>
                        </Row>

                        <div className={cn(styles.subTitle, styles.subTitleExtra)} style={{ marginTop: 24 }}>
                            考勤异常
                        </div>
                        <Row>
                            <Col span={6}>
                                <div className={styles.infoBox}>
                                    <p>迟到</p>
                                    <p>
                                        <em>{ADMData.lateArrivalNum}</em>人/次
                                    </p>
                                </div>
                            </Col>
                            <Col span={6}>
                                <div className={styles.infoBox}>
                                    <p>早退</p>
                                    <p>
                                        <em>{ADMData.earlyRetiremenNum}</em>人/次
                                    </p>
                                </div>
                            </Col>
                            <Col span={6}>
                                <div className={styles.infoBox}>
                                    <p>缺卡</p>
                                    <p>
                                        <em className={styles.colorMedium}>{ADMData.missingCardNum}</em>人/次
                                    </p>
                                </div>
                            </Col>
                            <Col span={6}>
                                <div className={styles.infoBox}>
                                    <p>缺勤</p>
                                    <p>
                                        <em className={styles.colorPoor}>{ADMData.absenteeismNum}</em>人/次
                                    </p>
                                </div>
                            </Col>
                        </Row>
                        <div className={cn(styles.subTitle, styles.subTitleExtra)} style={{ marginTop: 24 }}>
                            近30天出勤率
                        </div>
                        <Row style={{ height: 260 }}>{renderLine(ADMData)}</Row>
                    </Card>
                </Col>
            </Row>
        </Card>
    );
};
export default OperationCard;
